<template>
    <div>
        <transition name="el-zoom-in-top">
            <div class="menu" v-if="RightMenuStatus" ref="rightMenu">
                <div class="menuItem text_green" v-if="MenuObjectActiveType == 'Folder'" @click="menuClose('New')">
                    <i class="el-icon-folder-add"></i>
                    &nbsp;&nbsp; 新建文件夹
                </div>
                <div class="menuItem text_blue" v-if="MenuObjectActiveType == 'Folder'" @click="menuClose('Rename')">
                    <i class="el-icon-edit"></i>
                    &nbsp;&nbsp;编辑详情
                </div>
                <div class="menuItem text_blue" v-if="MenuObjectActiveType == 'Api'" @click="menuClose('SaveAs')">
                    <i class="el-icon-document-copy"></i>
                    &nbsp;&nbsp; 另存为
                </div>
                <div class="menuItem text_red" @click="menuClose('Delete')">
                    <i class="el-icon-delete"></i>
                    &nbsp;&nbsp;删除
                </div>
            </div>
        </transition>
        <div class="PAGE_title">Interface</div>
        <search></search>
        <root></root>
        <div class="moveMark" :style="{'left' : markSetting.x + 'px', 'top' : markSetting.y + 'px',}">
            <div class="icon" v-if="apiMoveType != 'moveIntoFolder' && apiMoveType != 'intoFolder'">&nbsp;</div>
            <div class="icon-folder" v-if="apiMoveType == 'moveIntoFolder' ||  apiMoveType == 'intoFolder'">
                <i class="el-icon-folder-add"></i>
            </div>
            <div class="title">{{markSetting.title}}</div>
        </div>
        <el-drawer ref="FolderDetail" append-to-body :wrapperClosable="false" show-close title="文件夹详情" direction="ltr"
            size="400px" :before-close="handleClose" :visible.sync="showFolderDetail">
            <folderDetail v-if="foldervalue" :folderValue="foldervalue"></folderDetail>
        </el-drawer>

        <el-dialog title="新建文件夹" append-to-body :close-on-click-modal="false" :class="theme"
            :visible.sync="newFolder.show" width="500px" :before-close="newFolderClose">
            <el-form :model="newFolder" :rules="newFolder.rules" ref="ruleForm">
                <el-form-item prop="title">
                    <el-input class="textStyle" v-model="newFolder.title" placeholder="文件夹名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input class="textStyle" type="textarea" resize="none" maxlength="1000" show-word-limit
                        placeholder="文件夹备注" v-model="newFolder.description" :autosize="{ minRows: 10, maxRows: 10}">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="samll" @click="newFolderEvent">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import search from './search';
    import root from './root';
    import folderDetail from './folderDetail';
    import { mapState } from "vuex";

    export default {
        data() {
            return {
                newFolder: {
                    rules: {
                        title: [
                            { required: true, message: '请输入文件夹名称', trigger: 'blur' },
                        ],
                    },
                    show: false,
                    title: '',
                    description: '',
                },
                showFolderDetail: false,
                theme: '',
            }
        },
        watch: {
            drawer: function (newVal, oldVal) {
                if (!newVal) {
                    this.$refs.FolderDetail.closeDrawer();
                };
                this.showFolderDetail = newVal;
            },
            showNewFolder: function (newVal, oldVal) {
                if (!newVal) {
                    this.newFolder.title = '';
                    this.newFolder.description = '';
                };
                this.newFolder.show = newVal;
            },
            RightMenuStatus: function (newVal, oldVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.$refs.rightMenu.style.left = this.RightMenuOption.X + 'px';
                        if (this.RightMenuOption.Y > document.body.clientHeight - 200) {
                            this.$refs.rightMenu.style.bottom = (document.body.clientHeight - this.RightMenuOption.Y) + 'px';
                            this.$refs.rightMenu.style.top = 'auto';
                        } else {
                            this.$refs.rightMenu.style.top = this.RightMenuOption.Y + 'px';
                            this.$refs.rightMenu.style.bottom = 'auto';
                        };
                        document.addEventListener('click', this.clearRightMenu);
                    });
                };
            },
        },
        computed: {
            ...mapState("Tree", {
                markSetting: state => state.markSetting,
                apiMoveType: state => state.apiMoveType,
                foldervalue: state => state.folderDetail.object,
                drawer: state => state.folderDetail.drawer,
                showNewFolder: state => state.newFolder.drawer,
                newFolderValue: state => state.newFolder.object,
            }),
            ...mapState('ApiActive', {
                MenuObject: state => state.MenuObject,
                MenuObjectActiveType: state => state.MenuObjectActiveType,
                RightMenuStatus: state => state.RightMenuStatus,
                RightMenuOption: state => state.RightMenuOption,
                content: state => state.content
            })
        },
        components: {
            search,
            root,
            folderDetail
        },
        mounted() {
            this.$store.dispatch('Tree/getRenderData');
        },
        methods: {
            handleClose(done) {
                this.$store.dispatch('Tree/closeFolderDetail');
                done();
            },
            newFolderClose(done) {
                this.$store.dispatch('Tree/closeNewFolder');
            },
            newFolderEvent() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        var confirm = this.$confirm('是否创建文件夹？');
                        if (confirm) {
                            this.$store.dispatch('Tree/newFolderEvent', {
                                title: this.newFolder.title,
                                description: this.newFolder.description
                            });
                        };
                    } else {
                        return false;
                    }
                });
            },
            clearRightMenu() {
                this.$store.dispatch('ApiActive/setRightActive', {
                    MenuObject: null,
                    MenuObjectActiveType: null,
                    RightMenuStatus: false,
                    RightMenuOption: { X: 0, Y: 0 },
                });
                document.removeEventListener('click', this.clearRightMenu);
            },
            menuClose(text) {
                if (this.MenuObjectActiveType == 'Folder') {
                    if (text == 'New') {
                        this.MenuObject.newFolderEvent();
                    } else if (text == 'Rename') {
                        this.MenuObject.openDetail();
                    } else if (text == 'Delete') {
                        this.MenuObject.deleteFolder();
                    };
                } else if (this.MenuObjectActiveType == 'Api') {
                    // console.log(this.MenuObject);
                    // console.log(this.content);
                    var ActiveObject = null;
                    for (let i = 0; i < this.content.tabs.length; i++) {
                        const element = this.content.tabs[i];
                        if (element.id == this.MenuObject.id) {
                            ActiveObject = this.content.$refs['content-' + element.UUID][0]
                            break;
                        };
                    };
                    if (text == 'SaveAs') {
                        ActiveObject.optionSelect('SaveAs');
                    } else if (text == 'Delete') {
                        ActiveObject.optionSelect('Delete');
                    };
                };
            },
        },
    }

</script>